웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
우선, 이벤트 통합 메서드는 JQuery 1.7 이후 버젼부터 사용이 가능합니다. 기존의 이벤트의 핸들러 함수로는 bind(), live(), delegate()가 있죠. 이 방법들 역시 사용이 가능하나 기능이 축소 및 변경되었기 때문에 앞으로는 통합 메소드 on() 을 사용하시기 바랍니다. 1.7 이후부터는 사용방법이 조금 바뀌었습니다. 어떻게 사용하는지 아래 예제를 참고하세요.
# jQuery 통합메서드 on(), off() 알아보기
먼저 on() 또는 off()는 아래와 같은 문법으로 사용됩니다.$(선택요소).on('click', function() {
// 실행할 구문
});
// 실행할 구문
});
이 방법은 좀 더 쉽게 알아보기 위해서 아래 예제 소스 코드를 참고하세요!
# on() 이벤트 통합 메서드 예제 소스 보기
아래 예제는 간단한 버튼 클릭 예제입니다. 클릭할 경우 클릭되었다는 경고창을 불러오게됩니다. 매우 간단하죠. 중요한 부분은 on() 메소드를 사용하였다는 점 하나입니다.<div>
<button id="test">Click Me!</button>
</div>
<button id="test">Click Me!</button>
</div>
아래는 스크립트 코드입니다.
@ onEvent.js
$( '#test').on('click', function() {
// 클릭시 경고창을 출력하는 이벤트 등록
alert('Clicking!');
})
// 클릭시 경고창을 출력하는 이벤트 등록
alert('Clicking!');
})
버튼을 클릭하면 어떻게 될가요? Clicking! 이라는 메시지창이 alert() 함수로 호출됩니다. 그럼 반대로 이벤트를 제거하는 방법을 알아보겠습니다.
# 이벤트 제거하기 off() 통합 메서드
위와 반대로 이벤트를 해제하는 이벤트 핸들러 제거함수는 off()입니다. 이 함수 역시 통합 메서드입니다. 사용방법은 아래와 같습니다.<div>
<button id="test">Click Event Remove!</button>
</div>
<button id="test">Click Event Remove!</button>
</div>
아래는 이벤트를 제거하는 off() 메소드의 스크립트 코드입니다.
$('#test').off('click');
// 해당 엘리먼트의 클릭이벤트를 제거함
// 해당 엘리먼트의 클릭이벤트를 제거함
이제 위 소스 코드의 실행으로 on() 이벤트는 모두 제거되었습니다. 이제 기존의 버튼 클릭시 나오던 경고창과 Clicking 메시지는 더이상 나오지 않게됩니다.
# 마치면서
이처럼 이벤트를 바인딩하는 경우 성능 및 메모리에 영향을 미치기때문에 사용하지 않거나 제거가 필요한 경우에 반드시 off()를 사용하여 제거해야합니다. 작은 어플리케이션의 경우 영향이 크지 않으나 큰 어플리케이션의 경우 그 차이가 클 수 있습니다.아래의 글도 찾고 계시지 않나요?
최근 jQuery 4.0.0 베타 버전 공개
궁금하다~ 양파싹 먹어도 되나요?
jQuery UI datepicker 시작 요일순서 바꾸는 방법
MS Office - 오피스 설치하기- 자바스크립트 클로저를 알아보고 다양한 예제 알아보자
- 제이쿼리 이벤트 click()의 반대되는 unclick()이 존재하나요?
- 제이쿼리를 사용한 animate() 예제 만들어 보기
- jQuery를 사용하여 long polling을 구현하는 방법은?
- 제이쿼리 ajax 사용시 timeout 대기시간 설정하는 방법은?
- jQLite, 작은 jQuery라고도 하는 이 안에 수행 가능한 것들은 무엇인가요?